<template>
  <el-form-item class="xFliveProps" label="直播地址列表">
    <div class="list" v-if="tempValue.length">
      <div class="item"
        v-for="(item, index) in tempValue"
        :key="index" >
        <el-input
          placeholder="请输入内容"
          :value="item"
          @input="onInput(index, $event)"
          size="mini"
          clearable>
        </el-input>
        <div class="tool-list">
          <i class="iconfont icon-delete" @click="del(index)"></i>
        </div>
      </div>
    </div>
    <div class="add-assets-wrap">
      <div class="btn-add-inner"
      @click="handleAdd">
        <i class="iconfont icon-add"></i>
      </div>
    </div>
  </el-form-item>
</template>

<script>
import { Message } from 'element-ui';
import { mapActions } from 'vuex';
export default {
  name: 'attr-sxc-liveSrcList',
  props: {
    liveSrcList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tempValue: []
    }
  },
  watch: {
    liveSrcList (v1, v2) {
      if (JSON.stringify(v1) === JSON.stringify(v2)) {
        return
      }
      this.initData()
    },
    tempValue () {
      this.change()
    }
  },
  created () {
    this.initData()
  },
  methods: {
    ...mapActions('programs', ['deleteElment']),
    initData () {
      let list = []
      this.liveSrcList.forEach(item => {
        list.push(item)
      })
      this.tempValue = list
    },
    getResultList () {
      let list = []
      for (let i = 0, len = this.tempValue.length; i < len; i++) {
        list.push(this.tempValue[i])
      }
      return list
    },
    change () {
      this.$emit('update:liveSrcList', this.getResultList())
    },
    del (index) {
      this["deleteElment"]();
    },
    onInput(idx, value) {
      let { tempValue } = this
      tempValue[idx] = value
      this.tempValue = [ ...tempValue ]
    },
    handleAdd() {
      if(this.tempValue.length>0){
        Message.warning("只能添加一个地址！");
      }else{
        this.tempValue = [...this.tempValue, '']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  .item {
    display: flex;
    flex-direction: row;
  }
}
.iconfont {
  cursor: pointer;
}
</style>
